import React, { useState } from 'react';
import DescriptionsCondition from '@/components/DescriptionsCondition';
import DrawerCondition from '@/components/DrawerCondition';
import { userObj } from '@/common/contact';
import { Button } from 'antd'
import ImagePreviewGroup from '@/components/DescriptionsCondition/ImagePreviewGroup';
const PointDetail = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading, oldFlag } = props;
  const { detail = {}, show } = visible;
  console.log(oldFlag, '123')
  if (oldFlag !== '1') {
    const { username, answer = '[]' } = detail
    let obj = {}
    const data = JSON.parse(answer)
    data.forEach((val) => {
      const { label } = val
      obj[label] = val
    })
    const formItems = data.map(val => {
      const { type, label, } = val
      if (type === 'Upload') {
        return {
          label: <div className='font_hide' style={{ width: 200 }}>{label}</div>,
          name: label,
          render: (o) => {
            const { value = [] } = o
            return <ImagePreviewGroup url={value.map(s => {
              return s.url
            }).toString()}></ImagePreviewGroup>
          }
        }
      } else if (type === 'AddressQuestion') {
        return {
          label: <div className='font_hide' style={{ width: 200 }}>{label}</div>,
          name: label,
          render: (o) => {
            const { value = [], addressType,
              addressValue = '' } = o

            return value.toString() + addressValue
          }
        }
      } else if (type === 'Radio') {
        return {
          label: <div className='font_hide' style={{ width: 200 }}>{label}</div>,
          name: label,
          render: (o) => {
            const { value = [], otherValue } = o
            return <div>
              <div>{value}</div>
              <div>{otherValue}</div>
            </div>
          }
        }
      } else if (type === 'FileUpload') {
        return {
          label: <div className='font_hide' style={{ width: 200 }}>{label}</div>,
          name: label,
          render: (o) => {
            const { value = [] } = o
            return value.map(s => {
              return <div><div style={{ color: "blue", textDecoration: "underli", cursor: 'pointer' }} onClick={() => { window.open(s.url) }} type='link'>{s.url}</div></div>
            })
          }
        }
      } else {
        return {
          label: <div className='font_hide' style={{ width: 200 }}>{label}</div>,
          name: label,
          render: (o) => {
            const { value = '' } = o
            return value
          }
        }
      }
    })
    console.log(formItems, obj)
    const modalProps = {
      title: `${username}问卷详情`,
      visible: show,
      onClose,
    };
    return (
      <DrawerCondition {...modalProps}>
        <DescriptionsCondition formItems={formItems} initialValues={obj}></DescriptionsCondition>
      </DrawerCondition>
    );
  }
  else {
    const { username, answer = '{}' } = detail
    const data = JSON.parse(answer)
    const formItems = Object.keys(data).map(item => {
      return {
        label: userObj[item] ? userObj[item] : [item],
        name: [item]
      }
    })
    const modalProps = {
      title: `${username}问卷详情`,
      visible: show,
      width: 1200,
      onClose,
    };
    return (
      <DrawerCondition {...modalProps}>
        <DescriptionsCondition formItems={formItems} initialValues={data}></DescriptionsCondition>
      </DrawerCondition>
    );

  }


};
export default PointDetail;
